<template>
  <div class="center_div">
    <div>
      <span>姓名:<el-input v-model="search.employeename" style="width: 20%;"></el-input></span>
      <span>账户:<el-input v-model="search.username" style="width: 20%;"></el-input></span>
      <el-button icon="" @click="searchEmp()" type="primary">搜索</el-button>
    </div>
    <el-table :data="employee" v-loading="tableLoading" element-loading-text="Loading">
      <el-table-column prop="employeename" label="姓名" min-width="90"></el-table-column>
      <el-table-column prop="username" label="账号" min-width="90"></el-table-column>
      <el-table-column prop="phone" label="电话" min-width="90"></el-table-column>
      <el-table-column prop="email" label="邮箱" min-width="90"></el-table-column>
      <el-table-column prop="department" label="部门" min-width="90"></el-table-column>
      <el-table-column prop="role" label="职位" min-width="90">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.role === 0" type="info">员工</el-tag>
          <el-tag v-if="scope.row.role === 1" type="success">组长</el-tag>
          <el-tag v-if="scope.row.role === 2">部长</el-tag>
        </template>
      </el-table-column>
    </el-table>
    <el-button type="success" @click="AfterNotify()">上一页</el-button>
    <el-button type="primary" @click="NextNotify()">下一页</el-button>
    <span> 共 {{this.pagenum}} 页， 当前第 {{this.pages}} 页</span>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        employee: [
          {employeename: '李大二',username: 'lidae',phone: '12345667',email: 'aawoef@qq.com', department: '组织部', role: 0},
          {employeename: '王小五',username: 'wangxiaowu',phone: '12345667',email: 'aawoef@qq.com', department: '组织部', role: 2},
          {employeename: '位是啥',username: 'weisahsa',phone: '12345667',email: 'aawoef@qq.com', department: '架构部', role: 2},
          {employeename: '啥大打',username: 'sahdada',phone: '12345667',email: 'aawoef@qq.com', department: '组织部', role: 1},
          {employeename: '阿斯顿',username: 'asidun',phone: '12345667',email: 'aawoef@qq.com', department: '架构部', role: 0},
          {employeename: '你很反',username: 'nihenfan',phone: '12345667',email: 'aawoef@qq.com', department: '架构部', role: 2},
        ],
        search: {},
        pages: 1,
        pagenum: 1,
        department: {},
        tableLoading: false
      }
    },
    created() {
      this.fetchDepart()
      clearTimeout(this.timer);  //清除延迟执行
      this.timer = setTimeout(()=>{   //设置延迟执行
        this.fetchEmployee(this.pages)
      },300)
    },
    methods: {
      async fetchEmployee(page){
          this.tableLoading = true
          let {code ,data ,msg} = await this.$post('/admin/searchemployees',{
            data: {page: page,employee: {username: this.search.username,employeename: this.search.employeename}}
          })
          if(code === 200) {
              this.employee = data.emps.map(item => {
                item.department = this.department[item.departmentid]
                return item
              })
              this.pages = data.page
              this.pagenum = data.pagenum
          }else {
              this.$message.error(msg)
          }
        this.tableLoading = false
      },
      searchEmp() {
        this.fetchEmployee(1)
      },
      async fetchDepart() {
        let {code ,data ,msg} = await this.$post('/register')
        if(code === 200) {
          for (let i = 0; i < data.length; i++) {
            this.department[data[i].departmentid] = data[i].departmentname
          }
        }else {
          this.$message.error(msg)
        }
      },
      NextNotify() {
        if (this.pages !==  this.pageNum) {
          this.fetchEmployee(++this.pages)
        }
      },
      AfterNotify() {
        if (this.pages !== 1) {
          this.fetchEmployee(--this.pages)
        }
      }
    }

  }
</script>

<style>
  .center_div{
    width: 60%;
    margin:0 auto;
    margin-bottom: 50px;
  }
</style>